import React from 'react';
import { Carousel } from 'antd';

const CustomCarousel = ({ items }) => {
  return (
    <Carousel
      autoplay
      style={{ border: '1px solid #cc', height: '200px' }}>
      {items.map(item => (
        <div key={item.title}>
          <img
            src={item.image}
            alt={item.title}
            style={{ width: '100%', height: '100%' }}
          />
          <div
            style={{
              position: 'absolute',
              bottom: 0,
              left: 0,
              width: '100%',
              height: '100%',
              color: '#321',
              padding: '10px',
              objectFit: 'cover',
            }}>
            <h3>{item.title}</h3>
            <a
              href={item.linkUrl}
              style={{ color: '#1a3' }}>
              查看详情
            </a>
          </div>
        </div>
      ))}
    </Carousel>
  );
};

export default CustomCarousel;
